<template>
  <div class="animate__animated animate__fadeInRight animate__delay-0.5s">
    <div class="login-parsel">
      <p>
        <el-icon style="font-size: 1.2rem;margin-top:1rem;" @click="router.go(-1)"
          ><Back
        /></el-icon>
      </p>
      <p style="font-size: 1.5rem;padding-top:3.5rem;">忘记密码</p>
      <p style="font-size: 0.9rem; color: gray; line-height: 0.1rem;padding-top:1.5rem;">
        文字描述信息示例
      </p>
      <div style="margin-top: 3.5rem">
        电子邮件<br />
        <input type="text" class="emailinp" v-model="email" />
      </div>
      <button class="vailbtn" @click="sendCode">发送一次性验证</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { useRouter ,useRoute} from "vue-router";
import { Back } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import 'animate.css';
const router = useRouter();
import axios from "axios";
const route=useRoute()

const email = ref("");


const sendCode = async ()=>{
  if(!email.value.includes('@qq.com')){
    ElMessage.error('请输入有效的QQ邮箱')
    return;
  }
  await axios.post('http://127.0.0.1:3000/zjm/sendEmail',{email:email.value}).then(res=>{
        ElMessage({
        message: "验证码已发送至邮箱",
        type: "success",
      });
      setTimeout(()=>{
        router.push({
          path:'/code',
          query:{
            email:email.value
          }
        })
      },1500)
    }).catch((err)=>{
      ElMessage.error('验证码发送失败')
    })
    
  }



</script>

<style lang="scss" scoped>
.login-parsel {
  width: 90vw;
  height: auto;
  margin: 0 auto;
  padding: 12px;
  box-sizing: border-box;
}
.emailinp {
  width: 85vw;
  padding: 0.5rem;
  box-sizing: border-box;
  margin-top: 0.5rem;
  margin-bottom: 0.8rem;
  border: 1px solid #d0d0d0;
  border-radius: 0.3rem;
}
.emailinp:focus {
  background: rgba(255, 185, 0, 0.1);
  border: 1px solid rgb(255, 185, 0);
}
.vailbtn {
  width: 85vw;
  height: 3rem;
  margin: 0 auto;
  margin-top: 1rem;
  border: none;
  border-radius: 0.5rem;
  background-color: #ffb900;
  color: white;
  font-size: 1.2rem;
}

</style>